<?





///////////////////example of use:
//include( "color_picker.inc.php");
//create_gradient( "TB_kitS_grad" , "rgb(200,3,3)" , "rgb( 3 , 3 , 200 )" );

/*
// HTML:
<script>
// callback fct:
function TB_kitS_grad( bck ){
	//alert( bck )
	
	document.getElementById( 'test_div' ).style.background = bck;
}
</script>
<div style="width:150px;height:100px;display:block" id=test_div >
</div>

*/

/// end of example of use


function create_gradient( $U , $iniColor1 , $iniColor2 ){

if( !preg_match( "/rgb/" , $iniColor1 ) || !preg_match( "/rgb/" , $iniColor2 ) ){
	$iniColor1 = "rgb( 3,3,3)";
	$iniColor2 = "rgb( 255,255,255)";
}

?>
<style>
div#div_<? echo $U ?>{
   /* fallback/image non-cover color */
   background-color: <? echo $iniColor1 ?>; 

   /* fallback image */
   background-image: url(images/fallback-gradient.png); 

      /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, <? echo $iniColor1 ?>, <? echo $iniColor2 ?>);
   
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, <? echo $iniColor1 ?>, <? echo $iniColor2 ?>); 
 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, <? echo $iniColor1 ?>, <? echo $iniColor2 ?>);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, <? echo $iniColor1 ?>, <? echo $iniColor2 ?>);
   
   /* Safari 4+, Chrome 1-9 */
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(<? echo $iniColor1 ?>), to(<? echo $iniColor2 ?>));

}

</style>
<script>
var mySheet = document.styleSheets[0];
var <? echo $U ?>_color1 = <? echo '"'.$iniColor1.'"' ?>;
var <? echo $U ?>_color2 = <? echo '"'.$iniColor2.'"' ?>;

function <? echo $U ?>1( col ){
	<? echo $U ?>_color1 = col;
	//alert( col );
	<? echo $U ?>_Main();
}
function <? echo $U ?>2( col ){
	<? echo $U ?>_color2 = col;
	<? echo $U ?>_Main();
}
function <? echo $U ?>_Main(){
	// chrome ???
	document.getElementById( "div_<? echo $U ?>" ).style.background = " -webkit-gradient(linear, 0% 0%, 0% 100%, from("+<? echo $U ?>_color1+"), to("+<? echo $U ?>_color2+"))"
	/// FF
	document.getElementById( "div_<? echo $U ?>" ).style.background = "-moz-linear-gradient(top, "+<? echo $U ?>_color1+", "+<? echo $U ?>_color2+")";
	
	

	//changeRule( "div#div_<? echo $U ?>" , "background" , <? echo $U ?>_color1 );
	
	//alert( "-webkit-gradient(linear, 0% 0%, 0% 100%, from("+<? echo $U ?>_color1+"), to("+<? echo $U ?>_color2+"));" )
}

 function findCSSRule(selector) {
  var ruleIndex = -1;				// Default to 'not found'
  var theRules = mySheet.cssRules ? mySheet.cssRules : mySheet.rules;
   for (i=0; i<theRules.length; i++) {
     if (theRules[i].selectorText == selector) {
      ruleIndex = i;
      break;
     } // endif theRules[i]
   } // end for i
  return ruleIndex;
 } // end findCSSRule()

 function changeRule(selector, property, setting) {
  var theRule = mySheet.cssRules ? mySheet.cssRules[findCSSRule(selector)] : mySheet.rules[findCSSRule(selector)];
  eval('theRule.style.' + property + '="' + setting + '"');
  return false;
 } // end changeRule()

</script>

<table>
<tr>
<td>
<?


create_colPicker( $U . "1" , $iniColor1 ,'1' );
create_colPicker( $U . "2" , $iniColor2 ,'1' );

?>
</td>
<td>
	<div class=div_gradient id=div_<? echo $U ?>
	style="display:block;width:50px;height:386px;border:1px solid red;"
	
	onclick="<? echo $U ?>( <? echo $U ?>_color1 , <? echo $U ?>_color2 , this.style.background )"

	
	>
	&nbsp;
	</div>

</td>
</tr>
</table>

<?
}
?>
